<template>
	<view class="my_users_container">
		<view class="my_users_box">
			<view class="my_users_all" v-for="item in usersList" :key="item.id">
				<view class="users_top_box">
					<view class="left_box">
						<view class="users_avatar_box">
							<image :src="item.img" mode="" class="users_avatar"></image>
						</view>
						<view class="users_title">
							{{ item.name }}
						</view>
					</view>
					<view class="right_box">
						加入时间 {{ item.date }}
					</view>
				</view>
				<view class="users_bottom_box">
					累计为我赚： <span
						style="color: #FF3333; font-size: 32rpx; font-family: my-font;">{{ item.price }}</span>元
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				usersList: [{
						id: '0',
						img: '/static/my/avatar.png',
						name: 'Wayne',
						date: '2023-06-06',
						price: '129.00'
					},
					{
						id: '1',
						img: '/static/my/avatar.png',
						name: 'Wayne_',
						date: '2023-06-06',
						price: '129.00'
					},
				]
			}
		},
		methods: {

		}
	}
</script>

<style lang="scss" scoped>
	.my_users_container {
		padding: 16rpx 20rpx 0;

		.my_users_box {

			.my_users_all {
				width: 100%;
				border-radius: 8rpx;
				background: #FFFFFF;
				padding: 32rpx 24rpx 28rpx 36rpx;
				margin-bottom: 12rpx;

				.users_top_box {
					display: flex;
					align-items: center;
					justify-content: space-between;
					border-bottom: 1px solid #FAFAFA;
					padding-bottom: 36rpx;

					.left_box {
						display: flex;
						align-items: center;

						.users_avatar_box {
							width: 68rpx;
							height: 68rpx;

							.users_avatar {
								width: 100%;
								height: 100%;
							}
						}

						.users_title {
							font-size: 32rpx;
							font-weight: 500;
							color: #333;
							padding-left: 20rpx;
						}
					}

					.right_box {
						font-size: 24rpx;
						font-weight: 400;
						color: #999999;
					}
				}

				.users_bottom_box {
					font-size: 24rpx;
					font-weight: 400;
					color: #333;
					padding-top: 18rpx;
				}
			}
		}
	}
</style>